<template>
	<view class="relevent">
		<view class="layout contact">
			<view class="header">
				<view class="left">
					<span class="iconfont icon">&#xe61a;</span>
					<view class="topic">
						联系人
					</view>
				</view>
				<!-- <navigator class="right" hover-class="none">+新建</navigator> -->
			</view>
			<view class="container">
				<view class="contact-list">
					<view class="item" v-for="item in project.contacts" :key="item.id">
						<view class="message">
							<view class="name">
								{{item.name || ''}}
							</view>
							<view class="phone">
								手机号码:{{item.mobile || '无'}}
							</view>
						</view>
						<view class="post">
							<view class="key" v-if="item.post">
								{{item.post}}
							</view>
							<view class="value">
								{{item.master ? '关键决策人' : '非关键决策人'}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="layout team">
			<view class="header">
				<view class="left">
					<span class="iconfont icon">&#xe65d;</span>
					<view class="topic">
						团队成员
					</view>
				</view>
				<view class="right" @click="addProjectMember">
					+添加
				</view>
			</view>
			<view class="container">
				<view class="team-head">
					<view class="tag">
						负责人
					</view>
					<view class="member-mes">
						<view class="avatar">
							<image src="@/static/images/avatar.png" mode="aspectFill"></image>
						</view>
						<view class="post">
							{{leader.nickname || ''}}
						</view>
						<span class="iconfont" @click="transfer">&#xe605;</span>
					</view>
				</view>
				<view :class="['team-member', memberEmpty && 'empty']">
					<empty v-if="memberEmpty" desc="暂无团队成员" height="300"></empty>
					<view class="member-item" v-for="item in memberList" :key="item.id">
						<view class="avatar">
							<image src="@/static/images/avatar.png" mode="aspectFill"></image>
						</view>
						<view class="post">
							{{item.nickname || ''}}
						</view>
						<view class="close" @click="deleteMember(item.id)">
							<uni-icons type="closeempty" size="16" color="#4095E5"></uni-icons>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="layout files">
			<view class="header">
				<view class="left">
					<span class="iconfont icon">&#xe660;</span>
					<view class="topic">
						项目资料
					</view>
				</view>
				<view class="right" @click="uploade">
					+上传
				</view>
			</view>
			<view class="container">
				<view class="file-list">
					<empty v-if="resourceEmpty" desc="暂无项目资料" height="300"></empty>
					<view class="file-item" v-for="(item, index) in resourceList" :key="index" @click="openFile(item.url)">
						{{index + 1}}.{{item.url.split('.').pop()}}
						<view class="close" @click.stop="deleteFile(item.id)">
							<uni-icons type="closeempty" size="16" color="#4095E5"></uni-icons>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="layout scheme">
			<view class="header">
				<view class="left">
					<span class="iconfont icon">&#xe660;</span>
					<view class="topic">
						实施方案
					</view>
				</view>
				<navigator v-if="project.status == 0 && project.stage < 3 && !carryOutEmpty" :url="`/pages/index/project/implementChanges?detail=${JSON.stringify(carryOut)}`" class="right" hover-class="none">+变更</navigator>
			</view>
			<view class="container">
				<empty v-if="carryOutEmpty" desc="暂无实施方案" height="300"></empty>
				<view v-else class="scheme-content">
					<!-- <view class="scheme-item max">
						计划更新时间：2024-03-21 12:32:11
					</view> -->
					<view class="scheme-item">
						开始日期：{{carryOut.startDate[0]}}-{{carryOut.startDate[1]}}-{{carryOut.startDate[2]}}
					</view>
					<view class="scheme-item">
						终止日期：{{carryOut.endDate[0]}}-{{carryOut.endDate[1]}}-{{carryOut.endDate[2]}}
					</view>
					<view class="scheme-item">
						实施内容：{{carryOut.content}}
					</view>
					<view class="scheme-item max">
						实施要求：{{carryOut.requirement}}
					</view>
					<view class="scheme-item max">
						实施文档：
					</view>
					<view class="scheme-item max file" v-for="(item, index) in carryOut.fileUrls" :key="index" @click="openFile(item)">
						{{index + 1}}.{{item.split('.').pop()}}
					</view>
				</view>
			</view>
		</view>
		<view class="layout project">
			<view class="header">
				<view class="left">
					<span class="iconfont icon">&#xe6ed;</span>
					<view class="topic">
						合同
					</view>
				</view>
				<navigator :url="`/pages/index/agreement/create?id=${project.id}&type=project`" class="right" hover-class="none">+新建</navigator>
			</view>
			<view class="container">
				<empty v-if="contractEmpty" desc="暂无合同" height="300"></empty>
				<view class="project-list">
					<navigator :url="`/pages/index/agreement/details?id=${item.id}`" hover-class="none" class="item" v-for="item in contractList" :key="item.id">
						<view class="top">
							<view class="title">
								{{item.name}}
							</view>
							<view v-if="item.auditStatus == 30" class="tag" :style="{color: `#bd3124`, borderColor: `#bd3124`}">
								不通过
							</view>
							<view v-else class="tag" :style="{color: `${item.color}`, borderColor: `${item.color}`}">
								{{item.statusText}}
							</view>
						</view>
						<view class="bottom">
							<view class="bot-item max">
								合同编号：{{item.no}}
							</view>
							<view class="bot-item">
								合同金额：￥{{item.totalPrice}}
							</view>
							<view class="bot-item">
								回款率：{{item.totalPrice ? (item.totalReceivablePrice/item.totalPrice).toFixed(2) * 100 : 0}}%
							</view>
							<view class="bot-item">
								签约时间：{{$share.getDate(item.orderDate)}}
							</view>
							<view class="bot-item">
								创建时间：{{$share.getDate(item.createTime)}}
							</view>
						</view>
					</navigator>
				</view>
			</view>
		</view>
		<view class="layout project">
			<view class="header">
				<view class="left">
					<span class="iconfont icon">&#xe651;</span>
					<view class="topic">
						审批记录
					</view>
				</view>
			</view>
			<view class="container">
				<empty v-if="approvalEmpty" desc="暂无记录" height="300"></empty>
				<view v-else class="project-list">
					<view class="item" v-for="item in approvalList" :key="item.id">
						<view class="top">
							<view class="title">
								{{item.processInstance.startUser.nickname}}的{{item.processInstance.name}}
							</view>
							<view class="tag" :style="{color: `${item.color}`, borderColor: `${item.color}`}">
								{{item.statusText}}
							</view>
						</view>
						<view class="bottom">
							<view class="bot-item max">
								审批编号：{{item.id}}
							</view>
							<view class="bot-item max">
								提交时间：{{$share.getTime(item.createTime)}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="layout recode">
			<view class="header">
				<view class="left">
					<span class="iconfont icon">&#xe680;</span>
					<view class="topic">
						操作记录
					</view>
				</view>
			</view>
			<view class="container">
				<empty v-if="operateEmpty" desc="暂无记录" height="300"></empty>
				<view v-else class="recode-container">
					<view class="recode-list" v-for="item in operateList" :key="item.id">
						<view class="item">
							<view class="info">
								<view class="user">
									<view class="circle"></view>
									<view class="avatar">
										<image src="@/static/images/avatar.png" mode="aspectFill"></image>
									</view>
									<view class="name">
										{{item.userName}}
									</view>
								</view>
								<view class="time">
									{{$share.getTime(item.createTime)}}
								</view>
							</view>
							<view class="action">
								{{item.subType}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 添加团队成员 -->
		<uni-popup ref="addMember" type="center">
			<view class="model-popup">
				<view class="top">
					<view class="title">
						添加团队成员
					</view>
					<view class="content">
						<view class="item">
							<view class="item-title">
								选择人员
							</view>
              <view class="select">
								<picker @change="changeUser" :value="index" :range="range">
									<view class="text">{{index < 0 ? '请选择' : range[index]}}</view>
								</picker>
							</view>
						</view>
						<view class="item">
							<view class="item-title">
								权限级别
							</view>
							<view class="radio">
								<radio-group class="grop" @change="radioChange">
									<label class="label" v-for="(item, index) in permiss" :key="item.value">
										<view>
											<radio style="transform:scale(0.7)" :value="item.value" />
										</view>
										<view>{{item.name}}</view>
									</label>
								</radio-group>
							</view>
						</view>
					</view>
				</view>
				<view class="bottom">
					<button class="cancle" @click="$refs.addMember.close()">取消</button>
					<button class="confire" @click="confireAdd">确定</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {getMemberListApi, addProMemberApi, deleteProMemberApi, getProjectTaskRecodeApi, getCarryOutApi} from "@/api/project_api.js";
	import {getUserListApi, getOperateListApi} from "@/api/common.js";
	import {getAgreementListApi} from "@/api/agreement_api.js";
	import empty from "@/components/empty.vue";
	export default{
		components:{
			empty
		},
		data(){
			return{
				contactList: [],
				leader:{},
				memberList: [],
				memberEmpty: false,
				index: -1,
        range: [],
				userList:[],
				level:0,
				permiss: [
					{value: 1, name: '只读'},
					{value: 2, name: '读写'}
				],
				resourceEmpty: false,
				resourceList: [],
				carryOutEmpty: false,
				carryOut: {},
				contractEmpty: false,
				contractList: [],
				operateEmpty: false,
				operateList: [],
				approvalEmpty: false,
				approvalList: [],
			}
		},
		props:{
			project:Object,
		},
		async mounted() {
			await uni.showLoading({
				mask: true,
				title: '加载中...'
			})
			await this.getMemberList();
			let resource = await this.$share.getResourceList(this.project.id, 9);
			this.resourceEmpty = resource.empty;
			this.resourceList = [...resource.resourceList];
			await this.getCarryOut();
			await this.getAgreementList();
			await this.getProjectTaskRecode();
			let operate = await this.$share.getOperateList(this.project.id, 'CRM 项目');
			this.operateEmpty = operate.empty;
			this.operateList = [...operate.list];
		},
		methods:{
			// 获取项目团队成员
			async getMemberList(){
				this.memberEmpty = false;
				let res = await getMemberListApi({
					bizType: 9,
					bizId: this.project.id
				}).catch(() => {
					this.memberEmpty = true;
					uni.hideLoading();
					return Promise.reject();
				})
				let leader = res.data.filter((item) => {
					return item.userId == this.project.ownerUserId;
				})
				if(leader.length > 0){
					this.leader = leader[0];
				}
				this.memberList = res.data.filter((item) => {
					return item.userId != this.project.ownerUserId;
				})
				if(this.memberList.length == 0){
					this.memberEmpty = true;
				}
				await uni.hideLoading();
			},
			// 添加项目成员
			addProjectMember(){
				this.$refs.addMember.open();
				getUserListApi().then((res) =>{
					this.userList = [...res.data]
					this.range = res.data.map((item) => item.nickname)
				})
			},
			changeUser(e){
				this.index = e.detail.value;
			},
			radioChange(e){
				this.level = e.detail.value
			},
			confireAdd(){
				if(this.index < 0){
					uni.showToast({
						icon: 'none',
						title: '请选择用户'
					})
					return;
				}
				if(this.level == 0){
					uni.showToast({
						icon: 'none',
						title: '请选择权限级别'
					})
					return;
				}
				uni.showLoading({
					mask: true,
					title: '加载中...'
				})
				this.$refs.addMember.close();
				addProMemberApi({
					userId: this.userList[this.index].id,
					projectId: this.project.id,
					level: this.level,
				}).then((res) => {
					if(res.data){
						uni.showToast({
							icon:'success',
							title: '添加成功！'
						})
						this.getMemberList();
					}else{
						uni.showToast({
							icon:'error',
							title: '添加失败！'
						})
					}
				}).catch(() => {
					uni.hideLoading();
				})
			},
			// 添加项目成员结束
			// 删除项目成员
			deleteMember(id){
				uni.showModal({
					title: '删除项目成员',
					content: '确定要删除该项目成员吗？',
					success: (res) => {
						if (res.confirm) {
							uni.showLoading({
								mask: true,
								title: '加载中...'
							})
							deleteProMemberApi(id).then(() => {
								uni.hideLoading();
								uni.showToast({
									icon: 'success',
									title: '删除成功！'
								})
								this.getMemberList();
							}).catch(() => {
								uni.hideLoading();
							})
						}
					},
				})
			},
			// 移交项目
			transfer(){
				console.log('11111111111111');
				this.$emit('transfer')
			},
			// 上传项目资料
			uploade(){
				wx.chooseMessageFile({
				  count: 1,
				  type: 'file',
				  success: async (res) => {
						let data = await this.$share.uploade(this.project.id, 9, res.tempFiles[0].path);
						if(data){
							uni.showLoading({
								mask: true,
								title: '加载中...'
							})
							let resource = await this.$share.getResourceList(this.project.id, 9);
							this.resourceEmpty = resource.empty;
							this.resourceList = [...resource.resourceList];
						}
				  }
				})
			},
			// 预览文件
			openFile(file){
				if(this.$share.isImg(file)){
					let urls = [];
					urls[0] = file
					uni.previewImage({
						urls: urls
					})
				}else{
					this.$share.openFile(file);
				}
			},
			// 删除文件
			async deleteFile(id){
				let data = await this.$share.deleteFile(id);
				if(data){
					uni.showLoading({
						mask: true,
						title: '加载中...'
					})
					let resource = await this.$share.getResourceList(this.project.id, 9);
					this.resourceEmpty = resource.empty;
					this.resourceList = [...resource.resourceList];
				}
			},
			//获得项目实施详情
			async getCarryOut(){
				this.carryOutEmpty = false;
				let res = await getCarryOutApi(this.project.id).catch(() => {
					this.carryOutEmpty = true;
					return Promise.reject();
				})
				if(res.data){
					this.carryOut = res.data;
				}else{
					this.carryOutEmpty = true;
				}
			},
			// 获取合同列表
			async getAgreementList(){
				this.contractEmpty = false;
				let res = await getAgreementListApi({
					projectId: this.project.id
				}).catch(() => {
					uni.hideLoading();
					this.contractEmpty = true;
					return Promise.reject();
				})
				res.data.list = res.data.list.map((item) => {
					let statusText = "";
					let color = "";
					switch(item.status){
						case 0: {
							statusText = "审批中";
							color = "#f6d7ab";
							break;
						}
						case 1: {
							statusText = "生效";
							color = "#3388FF";
							break;
						}
						case 2: {
							statusText = "作废";
							color = "#F44444";
							break;
						}
						case 3: {
							statusText = "履行完毕";
							color = "#3BBF03";
							break;
						}
					}
					return {
						...item,
						statusText,
						color
					}
				})
				this.contractList = [...this.contractList, ...res.data.list];
				if(res.data.total == 0){
					this.contractEmpty = true;
				}
				uni.hideLoading();
			},
			//获取审批记录
			async getProjectTaskRecode(){
				this.approvalEmpty = false;
				let res = await getProjectTaskRecodeApi({
					businessKey: this.project.id,
					processDefinitionKeys: ['crm-project-carry-out-audit','crm-project-deliver-audit','crm-project-pause-audit','crm-project-invalidate-audit','crm-project-file-audit']
				}).catch(() => {
					this.approvalEmpty = true;
					return Promise.reject();
				})
				res.data.list = res.data.list.map((item) => {
					let statusText = '';
					let color = '';
					switch(item.status){
						case 1: {
							statusText = '审批中';
							color = '#F4CE98';
							break;
						}
						case 2: {
							statusText = '已通过';
							color = '#A2EF4D';
							break;
						}
						case 3: {
							statusText = '不通过';
							color = '#f56c6c';
							break;
						}
						case 4: {
							statusText = '已取消';
							color = '#C9C9C9';
							break;
						}
						case 5: {
							statusText = '已退回';
							color = '#BD3124';
							break;
						}
						case 6: {
							statusText = '委派中';
							color = '#198AFA';
							break;
						}
					}
					return{
						...item,
						statusText,
						color
					}
				})
				this.approvalList = [...this.approvalList, ...res.data.list];
				if(res.data.total == 0){
					this.approvalEmpty = true;
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/common/style/customicons.scss";
	.relevent{
		padding: 28rpx;
		.layout{
			@include box;
			margin: 0 0 18rpx;
			.header{
				padding: 18rpx 28rpx;
				@include flex-r-between-center;
				border-bottom: 4rpx #f7f7f7 solid;
				.left{
					@include flex-r-start-center;
					.icon{
						color: #101010;
						font-size: 38rpx;
						font-weight: bold;
					}
					.topic{
						padding-left: 8rpx;
						color: #000;
						font-size: 28rpx;
					}
				}
				.right{
					color: #4095E5;
					font-size: 24rpx;
				}
			}
			.container{
				padding: 0 28rpx;
			}
		}
		.contact{
			.container{
				.contact-list{
					padding: 0 0 16rpx;
					.item{
						@include flex-r-between-start;
						padding: 20rpx 0;
						border-bottom: 4rpx #d2d2d2 solid;
						&:last-child{
							border-bottom: none;
						}
						.message{
							.name{
								font-size: 26rpx;
								color: #000;
							}
							.phone{
								font-size: 24rpx;
								color: #9A9A9A;
								padding: 10rpx 0 0;
							}
						}
						.post{
							@include flex-r;
							.key,.value{
								color: #fff;
								font-size: 20rpx;
								height: 30rpx;
								line-height: 30rpx;
								border-radius: 4rpx 20rpx 20rpx 4rpx;
								text-align: center;
							}
							.key{
								width: 80rpx;
								background-color: #3BBF03;
								margin-right: 30rpx;
							}
							.value{
								width: 140rpx;
								background-color: #3388FF;
							}
						}
					}
				}
			}
		}
		.team{
			.container{
				.team-head{
					padding: 16rpx 0 28rpx;
					border-bottom: 4rpx #d2d2d2 solid;
					@include flex-r-start-center;
					.tag{
						flex: 0 0 auto;
						@include flex-r-center-center;
						width: 100rpx;
						height: 56rpx;
						border: 4rpx #E29836 solid;
						color: #E29836;
						font-size: 24rpx;
						font-weight: bold;
						background-color: #FDF5E9;
						border-radius: 6rpx;
					}
					.member-mes{
						flex: 1 0 0;
						@include flex-r-between-center;
						height: 52rpx;
						padding: 0 32rpx;
						margin-left: 26rpx;
						border-radius: 6rpx;
						background-color: #F3F6F9;
						font-size: 26rpx;
						color: #4095E5;
						.avatar{
							@include avatar(48);
						}
					}
				}
				.team-member{
					@include flex-r-wrap;
					padding: 16rpx 0;
					&.empty{
						display: block;
						margin: 0 auto;
					}
					.member-item{
						width: 48%;
						@include flex-r-between-center;
						height: 52rpx;
						padding: 0 20rpx;
						border-radius: 6rpx;
						background-color: #F3F6F9;
						font-size: 26rpx;
						color: #4095E5;
						margin-right: 4%;
						margin-bottom: 16rpx;
						&:nth-of-type(2n){
							margin-right: 0;
						}
						.avatar{
							@include avatar(48);
						}
					}
				}
			}
		}
		.project{
			.container{
				.project-list{
					padding: 0 0 6rpx;
					.item{
						padding: 16rpx 0;
						border-bottom: 4rpx #d2d2d2 solid;
						&:last-child{
							border-bottom: none;
						}
						.top{
							@include flex-r-between-center;
							padding: 0 0 10rpx;
							.title{
								color: #000;
								font-size: 26rpx;
							}
							.tag{
								min-width: 80rpx;
								height: 36rpx;
								line-height: 36rpx;
								text-align: center;
								color: #3BBF03;
								font-size: 20rpx;
								border-radius: 4rpx;
								border: 2rpx #3BBF03 solid;
							}
						}
						.bottom{
							@include flex-r-wrap;
							.bot-item{
								width: 50%;
								color: #9A9A9A;
								font-size: 24rpx;
								padding: 0 0 10rpx;
							}
							.max{
								width: 100%;
							}
						}
					}
				}
			}
		}
		.files{
			.container{
				.file-list{
						padding: 18rpx 0;
						.file-item{
							height: 52rpx;
							line-height: 52rpx;
							text-align: center;
							border-radius: 6rpx;
							background-color: #F3F6F9;
							color: #101010;
							font-size: 28rpx;
							margin-bottom: 10rpx;
							position: relative;
							.close{
								position: absolute;
								top: 0;
								right: 10rpx;
							}
						}
				}
			}
		}
		.scheme{
			.container{
				.scheme-content{
					padding: 18rpx 0 10rpx;
					@include flex-r-wrap;
					.scheme-item{
						width: 50%;
						color: #9A9A9A;
						font-size: 24rpx;
						padding: 0 0 18rpx;
					}
					.max{
						width: 100%;
					}
					.file{
						@include flex-r-center-center;
						height: 52rpx;
						border-radius: 6rpx;
						color: #101010;
						font-size: 26rpx;
						background-color: #F3F6F9;
						padding: 0;
						margin-bottom: 18rpx;
					}
				}
			}
		}
		.recode{
			.container{
				.recode-container{
					padding: 26rpx 0 0;
					.recode-list{
						&:last-child{
							.item{
								.action{
									border: none;
								}
							}
						}
						.item{
							.info{
								@include flex-r-between-center;
								.user{
									@include flex-r-start-center;
									.circle{
										@include circle(16);
										background-color: #6C6C6C;
										margin-right: 36rpx;
									}
									.avatar{
										@include avatar(56);
									}
									.name{
										font-size: 26rpx;
										color: #000;
										padding-left: 30rpx;
									}
								}
								.time{
									font-size: 26rpx;
									color: #9A9A9A;
								}
							}
							.action{
								min-height: 62rpx;
								color: #000;
								font-size: 26rpx;
								padding-left: 124rpx;
								border-left: 4rpx #6C6C6C solid;
								margin-left: 6rpx;
							}
						}
					}
				}
			}
		}
		.model-popup{
			width: 600rpx;
			background-color: #fff;
			@include box;
			border-radius: 16rpx;
			.top{
				padding: 24rpx 40rpx 56rpx;
				.title{
					color: #101010;
					font-size: 36rpx;
					text-align: center;
					padding: 0 0 20rpx;
				}
				>.content{
					.item{
						display: flex;
						align-items: center;
						padding: 20rpx 0 0;
						.item-title{
							flex: 0 0 auto;
							font-size: 28rpx;
							color: #101010;
							padding-right: 20rpx;
						}
						.select{
							flex: 1 0 0;
							border: 2rpx #e8e8e8 solid;
							border-radius: 6rpx;
							padding: 10rpx;
							.text{
								font-size: 28rpx
							}
						}
						.radio{
							flex: 1 0 0;
							.grop{
								@include flex-r-start-center;
								.label{
									@include flex-r-start-center;
									padding-right: 20rpx;
								}
							}
						}
					}
				}
			}
			.bottom{
				@include flex-r;
				border-top: 4rpx #F0F0F2 solid;
				button{
					@include button;
					width: 50%;
					height: 90rpx;
					line-height: 90rpx;
					font-size: 32rpx;
					background-color: #fff;
					border-radius: 0;
				}
				.cancle{
					color: #BBBBBB;
					border-right: 4rpx #F0F0F2 solid;
				}
				.confire{
					color: #4095E5;
				}
			}
		}
	}
</style>